<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <style>

       #one{
           text-align: center;
           font-size: 20px;
           color:salmon;
       }

       div{
           height: 100px;
           background-color: cornflowerblue;
       }


    </style>
</head>
<body>
    
   <div style='width:100px;' id='one'>11111</div>

</body>
</html>
<script>

  let divObj = document.getElementsByTagName('div')[0];

//    //获得宽度
//     let w= divObj.style.width;
//     console.log(w);
//      let h =  divObj.style.height;
 //    console.log('---'+h+'-----');
 //----------操作外部样式表------------------------
//    // 1 获得样式表的集合
//     let csssytleList =   document.styleSheets;
//    // console.log(csssytleList.length);
//    // 2 区出第二个样式标
//   let stylesheet = csssytleList[1];
//   // 3 获得样式的规则的集合
//    let  cssRuleList = stylesheet.cssRules;
//    console.log(csssytleList.length);
//    // 4 获得该样式表中的第二个样式的规则
//    let  cssRule = cssRuleList[1];
//    //5  获得样式规则中的样式属性的值
//    let h = cssRule.style.height;

let h = document.styleSheets[1].cssRules[1].style.height;

   console.log(h);

</script>
